<template>
	<view style="width: 100%;background-color: #fff;">
		<view id="moments">
			<view class="deltext">
				<image src="/static/images/shanc.png" style="width: 26px;height: 28px;" @click="hanldelclick()"></image>
			</view>

			<view class="moments__post">
				<view class="post-left">
					<image class="post_header" :src="formData.user.avatar"></image>
				</view>

				<view class="post_right">
					<text class="post-username">{{formData.user.nickname}}</text>
					<view id="paragraph" class="paragraph">{{formData.content}}</view>
					<!-- 相册 -->
					<view class="thumbnails">
						<view :class="formData.atlas.length === 1?'my-gallery':'thumbnail'" v-for="(image, index_images) in formData.atlas"
						 :key="index_images">
							<image class="gallery_img" lazy-load mode="aspectFill" :src="image" :data-src="image" @tap.stop="previewImage(formData.atlas,image)"></image>
						</view>
					</view>
					<!-- 资料条 -->
					<view class="toolbar">
						<view class="timestamp">
							{{formData.create_time}}
						</view>
						<view class="like" @tap="like(formData.id)">
							<image :src="formData.star_list.isStar==0?'/static/images/dianzan_hei.png':'/static/images/dianzan_lan.png'"></image>
							<text style="font-size: 13px;color: #333333;padding-left: 5px;">点赞</text>
						</view>
					</view>
					<!-- 赞／评论区 -->
					<view class="post-footer">
						<view class="footer_content" v-if="isEmpty(formData.star_list.list)">
							<image class="liked" src="/static/images/dianzan_lan.png"></image>
							<text class="nickname" v-if="user" v-for="(user,index_like) in formData.star_list.list" :key="index_like">
							{{user}}
							<text v-if="getEnd(formData.star_list.list) != index_like">,</text>
							</text>
						</view>
						<view v-if="isEmpty(formData.message_list)">
							<view class="footer_content" v-for="(comment,comment_index) in formData.message_list" :key="comment_index" @tap="commentkk(index,post,comment.owner_id,comment.owner_nickname)">
								<view style="width: 25px;">
									<image class="liked" src="/static/images/pinlun_lan.png" v-if="comment_index==0"></image>
								</view>
								<!-- 有回复 -->
								<text class="comment-nickname" v-if="comment.from_id">
									{{comment.owner_nickname}}<text class="comment-content">回复</text>{{comment.from_nickname}}: <text class="comment-content">{{comment.message}}</text>
								</text>
								<!-- 没回复 -->
								<text class="comment-nickname" v-else>
									{{comment.owner_nickname}}:<text class="comment-content">{{comment.message}}</text>
								</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 结束 post -->
			</view>

			<view class="foot" v-show="showInput">
				<chat-input @send-message="send_comment" @blur="blur" :focus="focus" :placeholder="input_placeholder"></chat-input>
			</view>
			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>

			<!--评论区-->
			<view class="speak">
				<input type='text' placeholder='评论点什么呢…' style="margin-bottom: 10px;" v-model="text"/>
				<view style="font-size: 15px;color: #333333;padding-left: 10px;padding-bottom: 10px;" @click="send_comment()">提交</view>
			</view>


		</view>
	</view>
</template>

<script>
	import chatInput from '../../components/im-chat/chatinput.vue'; //input框
	import postData from '../../common/index/index.post.data.js'; //朋友圈数据

	export default {
		components: {
			chatInput
		},
		data() {
			return {
				tabList: ['一月', '二月', '七月', '八月', '九月', '十月', '十一月', '十二月'],

				posts: postData, //模拟数据
				showInput: false,
				focus: "",
				input_placeholder: "",
				showLoadMore: "",
				formData: "",
				text:"",
				from: 0,
				from_nickname: ''
			}
		},
		onLoad(option) {
			if (option.address) {
				let aa = option.address;
				let bb = decodeURIComponent(aa)
				this.formData = JSON.parse(bb);
				console.log(this.formData)
				this.formData.content = this.formData.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" '); //图片自适应问题
			}
		},
		onShow() {

		},

		computed: {

		},
		methods: {
			hanldelclick(){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '您是否确定删除？',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							that.hanldel();
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			//删除
			hanldel(){
				this.$http.post('/moments/del', {
					id: this.formData.id
				}).then((response) => {
					const res = response.data;
					if(res.code===0){
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						setTimeout(function(){
							uni.navigateBack()
						}, 1000);
					}
				});
			},
		
			//点赞
			like(id) {
				let user = uni.getStorageSync('userInfo');
				user = JSON.parse(user);

				if (this.formData.star_list.isStar == 0) {
					this.formData.star_list.isStar = 1; // 已点赞

					if (this.isEmpty(this.formData.star_list.list)) {
						this.formData.star_list.list[user.id] = user.nickname;
					} else {
						this.formData.star_list.list[user.id] = user.nickname;
					}
				} else {
					this.formData.star_list.isStar = 0; // 取消
					delete this.formData.star_list.list[user.id];
				}

				console.log(this.posts)
				this.$http.post('/moments/star', {
					id: id
				}).then((response) => {
					
				});
			},
			commentkk(index, post, from = 0,from_nickname) {
				console.log(this.token+"commentkk")
				this.token = uni.getStorageSync('accessToken')
				if(this.token==''){
					this.tokenShow = true;
				}
				console.log(this.token+"commentkk")
				if(this.token){
					console.log(post)
					console.log(from + '回复了:'+from_nickname);
					this.showInput = true; //调起input框
					this.focus = true;
					this.index = index;
					this.post_id = this.formData.id; // 回复的id
					this.from = from;
					this.from_nickname = from_nickname;
				}
			},

		send_comment: function() {
			let user = uni.getStorageSync('userInfo');
			user = JSON.parse(user);
		
			const param = {
				id: this.formData.id,
				owner_id: user.id, //只是显示
				owner_nickname: user.nickname, //只是显示
				from: this.from, // 回复了谁
				from_id: this.from, // 回复了谁
				from_nickname: this.from_nickname, // 回复了谁
				message: this.text
			};
			this.$http.post('/moments/message', param).then((response) => {
				const res = response.data;
				if(res.code==0){
					this.formData.message_list.push(param);
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
			this.text=""
			console.log(this.formData.message_list);
		},
			isEmpty(array) {
				for (let i in array) {
					if (i) {
						return true;
					}
				}
				return false;
			},
			//图片点击放大
	
			previewImage(imgs,img) {
				console.log(img)
				uni.previewImage({
					current:img,
					urls: imgs
				});
			},
			getEnd(array) {
				let len = 0;
				for (let i in array) {
					len = i;
				}
				return len;
			}
		}
	}
</script>

<style scoped>
	@import url("../../common/index/index.css");

	#moments {
		margin-top: 0;
	}
	.deltext{
		position: absolute;
		right: 10px;
		top: 18px;
		z-index: 999999999;
	}

	#moments .moments__post .like {
		width: auto;
		height: auto;
		position: absolute;
		right: 0px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		width: 77px;
		background-color: #F7F7F7;
		border-radius: 4px;
		padding: 10px;
		height: 26px;
		line-height: 26px;
	}

	#moments .moments__post .post_right {
		margin-bottom: 130px;
	}

	.uni-input-placeholder {
		font-size: 15px;
		color: #C4C4C4;
	}

	#moments .moments__post .toolbar image {
		padding-left: 0;
	}

	.#moments .moments__post .toolbar .timestamp {
		font-size: 13px;
	}

	#moments .moments__post {
		border-bottom: none;
	}

	.speak {
		display: flex;
		flex-direction: row;
		position: fixed;
		bottom: 0px;
		background-color: #f7f7f7;
		width: 100%;
		padding: 10px 17px 30px 17px;
		justify-content: space-between;
		align-items: center;
	}

	.speak input {
		width: 295px;
		height: 36px;
		background: rgba(255, 255, 255, 1);
		border-radius: 5px;
		padding: 0 10px;
		flex: 1
	}
</style>
